<template>
	<view class="w-picker">
		<view class="mask" :class="{'show':showPicker}" @tap="maskTap" @touchmove.stop.prevent catchtouchmove="true"></view>
		<view class="w-picker-cnt" :class="{'show':showPicker}">
			<view class="w-picker-hd" @touchmove.stop.prevent catchtouchmove="true">
				<view class="w-picker-btn" style="color: #9A9A9A;" @tap="pickerCancel">取消</view>
				<view class="w-picker-btn" :style="{'color':themeColor}" @tap="pickerConfirm">确定</view>
			</view>
			<view v-if="isSearchShow" class="search-input "><label class="iconfont icon-sousuo" />
				<input type="text" v-model="search" confirm-type="search" class="font-size30" placeholder="搜索" />
			</view>
			<view class="w-picker-view" v-if="mode=='dateTime'">
				<picker-view class="picker-view-100" indicator-style="height: 40px;" :value="pickVal" @change="bindChange">
					<picker-view-column>
						<view class="item" v-for="(item,index) in data.years" :key="index">{{item}}年</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in data.months" :key="index">{{item}}月</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in data.days" :key="index">{{item}}日</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in data.hours" :key="index">{{item}}时</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in data.minutes" :key="index">{{item}}分</view>
					</picker-view-column>
				</picker-view>
			</view>
			<view class="w-picker-view" v-if="mode=='date'">
				<picker-view class="picker-view-100" indicator-style="height: 40px;" :value="pickVal" @change="bindChange">
					<picker-view-column>
						<view class="item" v-for="(item,index) in data.years" :key="index">{{item}}年</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in data.months" :key="index">{{item}}月</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in data.days" :key="index">{{item}}日</view>
					</picker-view-column>
				</picker-view>
			</view>
			<view class="w-picker-view" v-if="mode=='yearMonth'">
				<picker-view class="picker-view-100" indicator-style="height: 40px;" :value="pickVal" @change="bindChange">
					<picker-view-column>
						<view class="item" v-for="(item,index) in data.years" :key="index">{{item}}年</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in data.months" :key="index">{{item}}月</view>
					</picker-view-column>
				</picker-view>
			</view>
			<view class="w-picker-view" v-if="mode=='dateTimes'">
				<picker-view class="picker-view-100" indicator-style="height: 40px;" :value="pickVal" @change="bindChange">
					<picker-view-column>
						<view class="item" v-for="(item,index) in data.years" :key="index">{{item}}年</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in data.months" :key="index">{{item}}月</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in data.days" :key="index">{{item}}日</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in data.hours" :key="index">{{item}}时</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in data.minutes" :key="index">{{item}}分</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in data.seconds" :key="index">{{item}}秒</view>
					</picker-view-column>
				</picker-view>
			</view>
			<view class="w-picker-view" v-if="mode=='time'">
				<picker-view class="picker-view-100" indicator-style="height: 40px;" :value="pickVal" @change="bindChange">
					<picker-view-column>
						<view class="item" v-for="(item,index) in data.hours" :key="index">{{item}}时</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in data.minutes" :key="index">{{item}}分</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in data.seconds" :key="index">{{item}}秒</view>
					</picker-view-column>
				</picker-view>
			</view>


			<view class="w-picker-view" v-if="mode=='selector'">
				<picker-view class="picker-view-100" indicator-style="height: 40px;" :value="pickVal" @change="bindChange">
					<picker-view-column>
						<view class="item" v-for="(item, index) in pickerLists" :key="index">{{item[wPickerProps.label]}}</view>
					</picker-view-column>
				</picker-view>
			</view>



			<view class="w-picker-view" v-if="mode=='multiselector'">
				<scroll-view class="tki-tree-view-sc" :scroll-y="true">
					<view class="uni-list">
						<checkbox-group class="checkbox">
							<label class="uni-list-cell uni-list-cell-pd" v-for="(item,index) in pickerList" :key="item[wPickerProps.value]">
								<view style="width: 50%;">{{item[wPickerProps.label]}}</view>
								<view class="uni-checkbox">
									<checkbox :value="item[wPickerProps.value]" :checked="item.checked" @tap="checkBox(item,index)" />
								</view>
							</label>
						</checkbox-group>
					</view>
				</scroll-view>
			</view>


			<!-- #ifndef MP -->
			<view class="w-picker-view" v-if="mode=='electionsingle'">
				<scroll-view class="tki-tree-view-sc" :scroll-y="true">
					<view class="w-picker-check-item">
						<view class="w-picker-check" v-for="(item, index) in pickerLists" :key="index" @tap="electionSingleSelect(item, index)">{{item[wPickerProps.label]}}
							<view class="w-picker-check-yes-radio">
								<view class="w-picker-check-yes-b-radio" v-if="item.checked"></view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<!-- #endif -->

			<!-- #ifdef MP -->
			<view class="w-picker-view" v-if="mode=='electionsingle'">
				<scroll-view class="tki-tree-view-sc" :scroll-y="true">
					<view class="uni-list">
						<radio-group @change="radioChange">
							<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in pickerLists" :key="item.value">
								<view style="width: 50%;">{{item.label}}</view>
								<view class="uni-checkbox">
									<radio :value="item.value" :checked="index === current" />
								</view>
							</label>
						</radio-group>
					</view>
				</scroll-view>
			</view>
			<!-- #endif -->



		</view>
	</view>
</template>

<script>
	import {
		initPicker,
		initDays
	} from "@/common/util.js";
	// import lyTree from '@/components/ly-tree/ly-tree.vue'
	import provinces from './city-data/province.js';
	import citys from './city-data/city.js';
	import areas from '@/common/area.js';
	import helper from '@/common/js/helper.js'
	export default {
		components: {
			// lyTree,
		},
		data() {
			return {
				current: 0,
				newList: [],
				checked: [],
				treeProps: {
					label: 'fullName',
				},
				checkOnClickNode: true,
				result: [],
				data: {},
				checkArr: [],
				checkValue: [],
				pickVal: [],
				showPicker: false,
				resultStr: "",
				defaultVal: [],
				startYear: helper.getDateYear('start'),
				endYear: helper.getDateYear('end'),
				multiList: new Array,
				search: '',
				temporarydate: ''
			};
		},
		props: {
			wPickerProps: {
				type: Object,
				default () {
					return {
						label: "label",
						value: "value"
					}
				}
			},
			mode: {
				type: String,
				default () {
					return "date"
				}
			},
			themeColor: {
				type: String,
				default () {
					return "#4869EE"
				}
			},
			step: {
				type: null,
				default: 1
			},
			pickerList: {
				type: Array,
				default () {
					return []
				}
			},
			isSearchShow: {
				type: Boolean,
				default () {
					return false
				}
			},
			dateSize: {
				type: String,
				default () {
					return "default"
				}
			},
			treeCheck: {
				type: Array,
				default () {
					return []
				}
			},
			treeRadio: {
				type: Boolean,
				default () {
					return true
				}
			},
		},
		mounted() {
			
		},
		computed: {
			pickerLists: function() {
				let search = this.search;
				if (search) {
					return this.pickerList.filter(function(product) {
						return Object.keys(product).some(function(key) {
							return String(product[key]).toLowerCase().indexOf(search) > -1
						});
					})
				}
				return this.pickerList
			},
		},
		watch: {
			mode(newValue, oldValue) {
				if (newValue != "selector" && newValue != "multiselector" && newValue != 'electionsingle' && newValue != 'tree') {
					this.defaultVal = helper.newdefaultVal(newValue);
				}
				this.initData();
			},
			pickerLists() {
				this.initData();
			},
		},
		methods: {
			handleNodeClick(obj) {
			},

			// getNodeKey(nodeId) {
			//     let node = this.store.root.getChildNodes([nodeId])[0];
			//     return getNodeKey(this.nodeKey, node.data);
			// },

			maskTap() {
				this.showPicker = false;
			},
			show() {
				this.showPicker = true;
			},
			hide() {
				this.showPicker = false;
			},
			/* 点击取消 */
			pickerCancel() {
				this.search = '';
				this.showPicker = false;
			},
			/* 点击确定 */
			pickerConfirm(e) {
				if (this.mode != 'tree') {
					this.search = '';
					if (this.mode == 'multiselector') {
						this.$eventHub.$emit('popupmodality', {
							checkArr: this.checkArr,
							defaultVal: this.pickVal,
							result: this.resultStr,
							pickerList: this.newList
						});
					} else {
						this.$eventHub.$emit('popupmodality', {
							checkArr: this.checkArr,
							defaultVal: this.pickVal,
							result: this.resultStr,
						});
					}

				} else {
					let _kes = this.$refs.tree.getCheckedKeys(true);
					let _name = this.$refs.tree.getCheckedNodes(true)
					if (_kes.length == 0) {
						_name.push(this.$refs.tree.getCheckedNodes(false));
						_kes.push(this.$refs.tree.getCheckedKeys(false));
					}
					this.$eventHub.$emit('popupmodality', {
						id: _kes,
						name: _name,
					});
					// let data = this.$refs.tree.getCurrentNode();
					
				}
				this.showPicker = false;
			},

			bindChange(val) {
				// console.log(val)
				let _this = this;
				let arr = val.detail.value;
				let year = "",
					month = "",
					day = "",
					hour = "",
					minute = "",
					second = "",
					province, city, area, urgent, classify;
				let checkArr = _this.checkArr;
				let days = [];
				let mode = _this.mode;
				switch (mode) {
					case "date":
						year = _this.data.years[arr[0]];
						month = _this.data.months[arr[1]];
						day = _this.data.days[arr[2]];
						if (year != checkArr[0]) {
							days = initDays(year, month);
							_this.data.days = days;
						};
						if (month != checkArr[1]) {
							days = initDays(year, month);
							_this.data.days = days;
						};
						_this.checkArr = [year, month, day];
						_this.resultStr = `${year+'-'+month+'-'+day}`;
						break;
					case "yearMonth":
						year = _this.data.years[arr[0]];
						month = _this.data.months[arr[1]];
						_this.checkArr = [year, month];
						_this.resultStr = `${year+'-'+month}`;
						break;
					case "dateTime":
						year = _this.data.years[arr[0]];
						month = _this.data.months[arr[1]];
						day = _this.data.days[arr[2]];
						hour = _this.data.hours[arr[3]];
						minute = _this.data.minutes[arr[4]];
						if (year != checkArr[0]) {
							days = initDays(year, month);
							_this.data.days = days;
						};
						if (month != checkArr[1]) {
							days = initDays(year, month);
							_this.data.days = days;
						};
						_this.checkArr = [year, month, day, hour, minute];
						_this.resultStr = `${year+'-'+month+'-'+day+' '+hour+':'+minute}`;
						break;
					case "time":
						hour = _this.data.hours[arr[0]];
						minute = _this.data.minutes[arr[1]];
						second = _this.data.seconds[arr[2]];
						_this.checkArr = [hour, minute, second];
						_this.resultStr = `${hour+':'+minute+':'+second}`;
						break;
					case "region":
						province = _this.data.provinces[arr[0]].label;
						city = _this.data.citys[arr[1]].label;
						area = _this.data.areas[arr[2]].label;
						if (province != checkArr[0]) {
							_this.data.citys = citys[arr[0]];
							_this.data.areas = areas[arr[0]][0];
							arr[1] = 0;
							arr[2] = 0;
							city = _this.data.citys[arr[1]].label;
							area = _this.data.areas[arr[2]].label;
						};
						if (city != checkArr[1]) {
							_this.data.areas = areas[arr[0]][arr[1]];
							arr[2] = 0;
							area = _this.data.areas[arr[2]].label;
						};
						_this.checkArr = [province, city, area];
						_this.checkValue = [_this.data.provinces[arr[0]].value, _this.data.provinces[arr[0]].value, _this.data.areas[arr[
							2]].value];
						_this.resultStr = province + ' ' + city + ' ' + area;
						break;
					case "selector":
						classify = _this.pickerLists[arr[0]];
						_this.checkArr = [classify[this.wPickerProps.label]];
						_this.checkValue = _this.pickerLists[arr[0][this.wPickerProps.value]];
						_this.resultStr = classify[this.wPickerProps.label];
						break;
				}
				_this.$nextTick(() => {
					_this.pickVal = arr;
				})
			},
			initData() {
				let _this = this;
				let data = {};
				let mode = _this.mode;
				let currentdate = new Date();
				let year, month, day, hour, minute, second, province, city, area, urgent, classify;
				if (mode == "region") {
					data = {
						provinces: provinces,
						citys: citys[_this.defaultVal[0]],
						areas: areas[_this.defaultVal[0]][_this.defaultVal[1]]
					};
				} else if (mode == "multiselector" || mode == 'electionsingle') {
					for (var i = 0; i < _this.pickerLists.length; i++) {
						let checked = false;
						for (var j = 0; j < this.multiList.length; j++) {
							if (this.multiList[j] == _this.pickerLists[i].label) {
								checked = true;
							}
							continue;
						}
					}
				} else {
					data = initPicker(_this.startYear, _this.endYear, _this.mode, _this.step)
				};
				_this.data = data;
				switch (mode) {
					case "date":
						year = data.years[_this.defaultVal[0]];
						month = data.months[_this.defaultVal[1]];
						day = data.days[_this.defaultVal[2]];
						_this.checkArr = [year, month, day];
						_this.resultStr = `${year+'-'+month+'-'+day}`;
						break;
					case "yearMonth":
						year = data.years[_this.defaultVal[0]];
						month = data.months[_this.defaultVal[1]];
						_this.checkArr = [year, month];
						_this.resultStr = `${year+'-'+month}`;
						break;
					case "dateTime":
						year = data.years[_this.defaultVal[0]];
						month = data.months[_this.defaultVal[1]];
						day = data.days[_this.defaultVal[2]];
						hour = data.hours[_this.defaultVal[3]];
						minute = data.minutes[_this.defaultVal[4]];
						second = data.seconds[_this.defaultVal[5]];
						_this.resultStr = `${year+'-'+month+'-'+day+' '+hour+':'+minute}`;
						_this.checkArr = [year, month, day, hour, minute];
						break;
					case "time":
						hour = data.hours[_this.defaultVal[0]];
						minute = data.minutes[_this.defaultVal[1]];
						second = data.seconds[_this.defaultVal[2]];
						_this.checkArr = [hour, minute, second];
						_this.resultStr = `${hour+':'+minute+':'+second}`;
						break;
					case "region":
						province = data.provinces[_this.defaultVal[0]];
						city = data.citys[_this.defaultVal[1]];
						area = data.areas[_this.defaultVal[2]];
						_this.checkArr = [province.label, city.label, area.label];
						_this.checkValue = [province.value, city.value, area.value];
						_this.resultStr = province.label + ' ' + city.label + ' ' + area.label;
						break;
					case "selector":
						_this.defaultVal = [0];
						classify = _this.pickerLists[_this.defaultVal[0]];
						if (classify == undefined)
							return;
						_this.checkArr = [classify[this.wPickerProps.label]];
						_this.checkValue = [classify[this.wPickerProps.value]];
						_this.resultStr = classify[this.wPickerProps.label];
						break;
					case "multiselector":
						_this.defaultVal = [0];
						classify = _this.pickerLists[_this.defaultVal[0]];
						if (classify == undefined)
							return;
						_this.checkArr = [classify[this.wPickerProps.label]];
						_this.checkValue = [classify[this.wPickerProps.value]];
						_this.resultStr = classify[this.wPickerProps.label];
						break;
					case "electionsingle":
						_this.defaultVal = [0];
						classify = _this.pickerLists[_this.defaultVal[0]];
						if (classify == undefined)
							return;
						_this.checkArr = [classify[this.wPickerProps.label]];
						_this.checkValue = [classify[this.wPickerProps.value]];
						_this.resultStr = classify[this.wPickerProps.label];
						break;
				}
				_this.$nextTick(() => {
					_this.pickVal = _this.defaultVal;

				})
			},


			checkBox(item, index) {
				this.pickerItemSelect(item, index);
			},


			pickerItemSelect(item, index) {
				item.checked = !item.checked
				if (item.checked) {
					
					this.multiList.push(item[this.wPickerProps.label]);
					this.checkArr.push(item[this.wPickerProps.label])
					this.pickVal.push(index);
					this.newList = this.pickerList
					
				} else {
					var ind = this.multiList.indexOf(item[this.wPickerProps.label]);
					
					this.multiList.splice(ind, 1);
					this.checkArr.splice(ind, 1);
					this.pickVal.splice(ind, 1);
				}
				this.$forceUpdate();
				this.resultStr = this.multiList.toString();
			},

			/* 小程序单选 */
			radioChange(evt) {
				for (let i = 0; i < this.pickerList.length; i++) {
					if (this.pickerList[i].value === evt.detail.value) {
						this.current = i;
						this.$forceUpdate();
						this.checkArr = [this.current];
						this.pickVal = [this.current];
						this.resultStr = this.pickerList[i][this.wPickerProps.label]
						break;
					}
				}
			},

			/* 非小程序 */
			electionSingleSelect(item, index) {
				item.checked = !item.checked
				this.pickerLists.forEach((v, i) => {
					if (i != index) {
						this.pickerList[i].checked = false
					} else {
						this.pickerList[i].checked = true
					}
				})
				this.$forceUpdate();
				this.checkArr = [index];
				this.pickVal = [index];
				this.resultStr = item[this.wPickerProps.label]
			}
		},
	}
</script>

<style lang="scss" scoped>
	uni-checkbox {
		appearance: none;
		outline: 0;
		background-color: #fff;
		border-radius: 3px;
		width: 44rpx;
		height: 44rpx;
		position: relative;
	}

	.w-picker {
		.mask {
			position: fixed;
			z-index: 1000;
			top: 0;
			right: 0;
			left: 0;
			bottom: 0;
			background: rgba(0, 0, 0, 0.6);
			visibility: hidden;
			opacity: 0;
			transition: all 0.3s ease;
		}

		.show {
			visibility: visible;
			opacity: 1;
		}

		.w-picker-cnt {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			transition: all 0.3s ease;
			transform: translateY(100%);
			z-index: 3000;
		}

		.show {
			transform: translateY(0);
		}

		.w-picker-hd {
			display: flex;
			align-items: center;
			padding: 0 28upx;
			height: 88upx;
			background-color: #fff;
			position: relative;
			text-align: center;
			font-size: 32upx;
			justify-content: space-between;

			.w-picker-btn {
				font-size: 30upx;
			}
		}

		.w-picker-hd:after {
			content: ' ';
			position: absolute;
			left: 0;
			bottom: 0;
			right: 0;
			height: 1px;
			border-bottom: 1px solid #e5e5e5;
			color: #e5e5e5;
			transform-origin: 0 100%;
			transform: scaleY(0.5);
		}

		.item {
			text-align: center;
			width: 100%;
			// height: 80upx;
			line-height: 80upx;
			text-overflow: ellipsis;
			white-space: nowrap;
			font-size: 30upx;
		}

		.w-picker-view {
			width: 100%;
			height: 476upx;
			overflow: hidden;
			background-color: rgba(255, 255, 255, 1);
			z-index: 666;
		}

		.picker-view-100 {
			height: 100%;
		}

		.w-picker-check-yes {
			width: 20px;
			height: 20px;
			border-top-left-radius: 20%;
			border-top-right-radius: 20%;
			border-bottom-right-radius: 20%;
			border-bottom-left-radius: 20%;
			border-top-width: 1upx;
			border-left-width: 1upx;
			border-bottom-width: 1upx;
			border-right-width: 1upx;
			border-style: solid;
			border-color: #07bb07;
			display: flex;
			justify-content: center;
			align-items: center;
			box-sizing: border-box;
		}

		.w-picker-check-yes-b {
			width: 12px;
			height: 12px;
			border-top-left-radius: 20%;
			border-top-right-radius: 20%;
			border-bottom-right-radius: 20%;
			border-bottom-left-radius: 20%;
			background-color: #07bb07;
		}

		.tki-tree-view-sc {
			height: 100%;
			overflow: hidden;
		}

		.w-picker-check {
			width: 100%;
			height: 40px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #3A3A3A;
		}

		.w-picker-check-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 0 28rpx;
		}

		.w-picker-check-yes-radio {
			width: 20px;
			height: 20px;
			border-top-left-radius: 50%;
			border-top-right-radius: 50%;
			border-bottom-right-radius: 50%;
			border-bottom-left-radius: 50%;
			border-top-width: 1upx;
			border-left-width: 1upx;
			border-bottom-width: 1upx;
			border-right-width: 1upx;
			border-style: solid;
			border-color: #07bb07;
			display: flex;
			justify-content: center;
			align-items: center;
			box-sizing: border-box;
		}

		.w-picker-check-yes-b-radio {
			width: 12px;
			height: 12px;
			border-top-left-radius: 50%;
			border-top-right-radius: 50%;
			border-bottom-right-radius: 50%;
			border-bottom-left-radius: 50%;
			background-color: #07bb07;
		}

		.search-input {
			margin: 0;
			width: 100%;
			border-radius: 0;
			background-color: #FFFFFF;
			border-bottom: 1px solid #F5F5F5;
		}

		.search-input>.iconfont {
			margin-left: 14rpx;
		}
	}
</style>
